<!-- 点餐 -->
<template>
    <div>
    <div class="order-main">
        <list :class="[isBottomShow?'new_menu-list':'menu-list']">
            <cell class='menu-list-cell' v-for="(k, v) in menuList" :key="v">
                <text v-if='v!=is_to_title' class="menu-list-cell-text" @click="jumpToTitle(v)">{{k.name}}</text>
                <text v-else class="new_menu-list-cell-text" @click="jumpToTitle(v)">{{k.name}}</text>
                <div v-if='complete_menu[k.id]>0' class="menu-list-cell-num"><text style="color: #ffffff;">{{complete_menu[k.id]}}</text></div>
            </cell>
        </list>
        <list :class="[isBottomShow?'new_menuDetailList':'menuDetailList']">
            <cell class='menuDetailCell' v-for="(k, v) in menuDetails" :key="k.menu_id">
                <text :ref="'index'+v" style="font-size:35px;font-weight: bold;">{{k.menu_name}}</text>
                <div class='menuDetailDiv' v-for="(kk, vv) in k.lists" :key="kk.id">
                    <div class='menuDetailDivImg'>
                        <image class='menu-img' :src='kk.icon'></image>
                    </div>
                    <div class='menuDetailDivContent'>
                        <text style="font-size:30px;font-weight: bold;">{{kk.title}}</text>
                        <text class='menuDetailDivContentDetails'>{{kk.details}}</text>
                        <text class='menuDetailDivContentDetails'>月售 {{kk.monthSale}}</text>
                        <div class='menuDetailDivContentDetailsPrice'>
                            <div class='menuDetailDivContentDetailsPriceDiv'>
                                <text class='presentPrice'>{{kk.presentPrice}}</text>
                                <text class='menuDetailDivContentDetailsoriginalPrice shanchu'>{{kk.originalPrice}}</text>
                            </div>
                            <div class="addNum">
                                <div v-if="complete_datas.find(element => element.id===kk.id)['num']" class='minusSign' @click="reduceGoods(k.menu_id, kk)"><text>-</text></div>
                                <div v-if="complete_datas.find(element => element.id===kk.id)['num']" style="margin:0px 10px;"><text>{{complete_datas.find(element => element.id===kk.id)['num']}}</text></div>
                                <div class='plush' @click="addGoods(k.menu_id, kk)"><text>+</text></div>
                            </div>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
        </div>
        <div class='footDiv'>
            <!-- <list style="height:200px;" v-if="isBottomShow">
                <header>
                    <div>aaaaa</div>
                </header>
                <cell v-for="data of complete_datas" :key="data.id">
                    <div>
                        <image :src='data.icon' style="width: 70px;height: 70px;" ></image>
                        <text>{{data.title}}</text>
                        <text>{{data.standard}}</text>
                        <div class="addNum">
                            <div v-if="complete_datas.find(element => element.id===data.id)['num']" class='minusSign' @click="reduceGoods(data.menu_id, data)"><text>-</text></div>
                            <div v-if="complete_datas.find(element => element.id===data.id)['num']" style="margin:0px 10px;"><text>{{complete_datas.find(element => element.id===data.id)['num']}}</text></div>
                            <div class='plush' @click="addGoods(data.menu_id, data)"><text>+</text></div>
                        </div>
                    </div>
                </cell>
            </list> -->
            <div class='footDivFlex' v-if='totalNum<=0'>
                <div class='footDivFlexMenu'>
                    <text style="font-size: 35px;font-weight: bold;" class='footDivFlexMenusp'>未选购商品</text>
                    <text style="font-size: 27px;">另需配送费 {{datas.distributionFee}}</text>
                </div>
                <div class='footDivFlexMenuqss'>
                    <text style="font-size: 27px;">{{datas.standard}}起送</text>
                </div>
            </div>

            <div class='footDivFlex' v-else @click="dataDetails">
                <div>
                    <div class="footDivFlexTotalNum"><text style="color: #ffffff;">{{totalNum}}</text></div>
                </div>
                <div class='footDivFlexMenu'>
                    <text style="font-size: 35px;font-weight: bold;" class='footDivFlexMenusp'>¥{{totalPrice}}</text>
                    <text style="font-size: 27px;">另需配送费 {{datas.distributionFee}}</text>
                </div>
                <div class='footDivFlexMenuqss'>
                    <text style="font-size: 27px;" @click="settlement" >去结算</text>
                </div>
            </div>
            <!-- 蒙板 -->
            <!-- <div class='mask' v-if="isBottomShow" @click="removeMB"></div> -->
            <wxc-popup popup-color="#ffffff"
                    :show="isBottomShow"
                    @wxcPopupOverlayClicked="popupOverlayBottomClick"
                    pos="bottom">
                <list style="height:700px;margin:20px;" v-if="isBottomShow">
                    <header>
                        <div style="background-color:#ffffff;marin:10px 0;align-self: flex-end;" @click="emptyData">清空购物车</div>
                    </header>
                    <cell v-for="data of complete_datas" :key="data.id">
                        <div v-if='data.num>0' class='wxcPopupListCell'>
                            <div>
                                <image :src='data.icon' style="width: 90px;height: 90px;" ></image>
                            </div>
                            <div>
                                <text>{{data.title}}</text>
                                <!-- <text>{{data.standard}}</text> -->
                            </div>
                            <div class="addNum">
                                <div v-if="complete_datas.find(element => element.id===data.id)['num']" class='minusSign' @click="reduceGoods(data.menu_id, data)"><text>-</text></div>
                                <div v-if="complete_datas.find(element => element.id===data.id)['num']" style="margin:0px 10px;"><text>{{complete_datas.find(element => element.id===data.id)['num']}}</text></div>
                                <div class='plush' @click="addGoods(data.menu_id, data)"><text>+</text></div>
                            </div>
                        </div>
                    </cell>
                </list>
                <div class="wxcPopupListFoot">
                    <div class="wxcPopupListFootTotalNum">
                        <text style="color: #ffffff;">{{totalNum}}</text>
                    </div>
                    <div>
                        <text style="font-size: 40px;font-weight: bold;">¥{{totalPrice}}</text>
                    </div>
                    <div class='wxcPopupListFootMenuqss'>
                        <text style="font-size: 27px;" @click="settlement" >去结算</text>
                    </div>
                </div>
            </wxc-popup>
        </div>
        <wxc-dialog title="结算页面"
            :show="showDialog"
            :content='totalPricezz'
            :single="false"
            :is-checked="isCheckedDialog"
            @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
            @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"
            @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
        </wxc-dialog>
    </div>
</template>
<script>
import { WxcPopup, WxcOverlay, WxcDialog } from 'weex-ui';

import Config from "../datas/business_config.js";

const dom = weex.requireModule('dom')

export default {
  data: () => ({
    menuDetails: [],
    menuList: [],
    orderList: [],
    datas: {},
    is_to_title: 0,
    complete_menu: {},
    complete_datas: [],
    totalPrice: 0,
    totalNum: 0,
    isBottomShow: false,
    showDialog: false,
    isCheckedDialog: false,
    totalPricezz: ''
  }),
  components: { WxcPopup, WxcOverlay, WxcDialog },
  mounted(){
      const self = this;
      self.menuDetails = Config.menuDetails;
      self.initdef();
      self.datas = this.$route.params;
    //   // 接受跨页面通讯数据
    //   const b = new BroadcastChannel('menu')
    //   b.onmessage = function (event) {
    //     event.data.datas;
    //   }
  },
  methods:{
      initdef(){
          // 需要初始化数据，不然无法使用
          const self = this;
          let new_menuList = [];
          let new_complete_menu = {};
          let new_complete_datas = [];
          for(let k of Config.menuDetails){
              new_menuList.push({
                  id: k.menu_id,
                  name: k.menu_name
              });
              new_complete_menu[k.menu_id] = 0;
              for(let kk of k.lists){
                  kk['menu_id'] = k.menu_id;
                  new_complete_datas.push(kk);
              }
          };
          self.menuList = new_menuList;
          // 需要初始化数据，不然无法使用
          self.complete_menu = new_complete_menu;
          self.complete_datas = new_complete_datas;
      },
      // 根据导航点击改变背景颜色和跳到指定菜单
      jumpToTitle(index){
          const self = this;
          self.is_to_title = index;
          const el = this.$refs['index'+index][0]
          dom.scrollToElement(el, {})
      },
      addGoods(menu_id, data){
          // 本来就想简单写一下，所以数据结构有点问题，这里处理一下
          let new_price = Number(data.presentPrice.replace('¥', ''));
          // 菜品数量增加和菜品种类的增加
          const self = this;
          // 这里的数据购物车需要
          let find_data = self.complete_datas.find(element => element.id===data.id)
          if(find_data['num']<=0 || find_data['num']==null){
            //   self.complete_datas.push({
            //       icon: data.icon,
            //       title: data.title,
            //       price: new_price,
            //       num: 0
            //   })
              find_data['num']= 0 + 1;
              self.totalPrice = self.totalPrice + new_price;
              self.totalNum = self.totalNum + 1;
          }else{
              find_data['num']= find_data['num'] + 1;
              find_data['price']= find_data['price'] + new_price;
              self.totalPrice = self.totalPrice + new_price;
              self.totalNum = self.totalNum + 1;
          }
          if(self.complete_menu[menu_id] <= 0 || self.complete_menu[menu_id] == null){
              self.complete_menu[menu_id] = 0 + 1;
          }else{
              self.complete_menu[menu_id] = self.complete_menu[menu_id] + 1;
          }
      },
      reduceGoods(menu_id, data){
          // 本来就想简单写一下，所以数据结构有点问题，这里处理一下
          let new_price = Number(data.presentPrice.replace('¥', ''));
          // 菜品数量减少和菜品种类的减少
          const self = this;
          // 这里的数据购物车需要
          let find_data = self.complete_datas.find(element => element.id===data.id)
          if(find_data['num']<=0 || find_data['num']==null){
              find_data['num']= 0;
              self.totalPrice = 0;
              find_data['price']= 0;
              self.totalNum = 0;
          }else{
              find_data['num']= find_data['num'] - 1;
              find_data['price']= find_data['price'] - new_price;
              self.totalPrice = self.totalPrice - new_price; 
              self.totalNum = self.totalNum - 1;
          }
          if(self.complete_menu[menu_id] <= 0 || self.complete_menu[menu_id] == null){
              self.complete_menu[menu_id] = 0;
          }else{
              self.complete_menu[menu_id] = self.complete_menu[menu_id] - 1;
          }
      },
      // 结算
      settlement(){
          this.totalPricezz = '结算价格：¥'+this.totalPrice
          this.showDialog = true;
      },
      // 点击跳出列表
      dataDetails(){
          this.isBottomShow = true;
      },
      // 点击蒙板，列表消失
      popupOverlayBottomClick () {
        this.isBottomShow = false;
      },
    //   removeMB(){
    //       this.isBottomShow = false;
    //   },
      // 清空购物车
      emptyData(){
        const self = this;
        let new_complete_menu = {};
        let new_complete_datas = [];
        for(let k of Config.menuDetails){
            new_complete_menu[k.menu_id] = 0;
            for(let kk of k.lists){
                kk['menu_id'] = k.menu_id;
                kk['num'] = 0;
                new_complete_datas.push(kk);
            }
        };
        self.complete_menu = new_complete_menu;
        self.complete_datas = new_complete_datas;
        self.totalPrice = 0;
        self.totalNum = 0;
      },
    //   openDialog () {
    //     this.showDialog = true;
    //   },
      wxcDialogCancelBtnClicked () {
      //此处必须设置，组件为无状态组件，自己管理
        this.showDialog = false;
      },
      wxcDialogConfirmBtnClicked () {
      //此处必须设置，组件为无状态组件，自己管理
        this.showDialog = false;
      },
      wxcDialogNoPromptClicked (e) {
      //此处必须设置，组件为无状态组件，自己管理
        this.isCheckedDialog = e.isCheckedDialog;
      }
  }
}

</script>

<style scoped>
.order-main{
    flex-direction: row;
}

.menu-list {
    width: 200px;
    /* 这里的高度为了下面购物车界面留空间 */
    height: 500px;
    background-color: rgb(246,246,246);
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
}

.new_menu-list {
    width: 200px;
    /* 这里的高度为了下面购物车界面留空间 */
    height: 300px;
    background-color: rgb(246,246,246);
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
}

/* .menu-list-cell {
    padding: 20px;
} */

.menu-list-cell-text {
    padding: 25px;
    font-size: 27px;
}

.new_menu-list-cell-text {
    background-color: #ffffff;
    padding: 25px;
    font-size: 27px;
}

.menu-img {
    width: 190px;
    height: 190px;
}

.menuDetailDiv {
    flex-direction: row;
    margin-bottom: 20px;
    /* justify-content: center;
    align-items: center; */
}

.menuDetailList{
    /* width: 1000px; */
    /* 这里一定要给一个高度，不然安卓web可以滑动，ios不能滑动，也是为了给下面购物车界面留空间*/
    height: 500px;
    margin-left: 20px;
}

.new_menuDetailList{
    /* width: 1000px; */
    /* 这里一定要给一个高度，不然安卓web可以滑动，ios不能滑动，也是为了给下面购物车界面留空间*/
    height: 300px;
    margin-left: 20px;
}

.menuDetailCell {
    /* margin-bottom: 50px; */
}

.menuDetailDivImg {
    width: 190px;
}
.menuDetailDivContent{
    margin: 20px;
}

/* 超出宽度显示省略号
 */
.menuDetailDivContentDetails{
    font-size: 27px;
    color:#808080;
    width: 300px;
    text-overflow: ellipsis;
    lines: 1;
}

/* 添加删除线 */
.shanchu {
    text-decoration:line-through;
    margin-left: 10px;
}

.menuDetailDivContentDetailsPrice {
    flex-direction: row;
    justify-content: space-between;
}
.menuDetailDivContentDetailsPriceDiv {
    flex-direction: row;
    align-items: baseline;
}

.presentPrice {
    color: #F08080;
    font-size:30px;
    font-weight: bold;
}

.menuDetailDivContentDetailsoriginalPrice {
    font-size: 27px;
    color:#808080;
}

.addNum{
    position: relative;
    flex-direction: row;
    justify-content:center;
    align-items: center;
}

.plush {
    width: 50px;
    height: 50px;
    background-color: #009ff0;
    border-radius: 50px;
    justify-content:center;
    align-items: center;
}

.minusSign {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: #009ff0;
    justify-content:center;
    align-items: center;
}

/* .footDiv {
    background-color: #ffffff;
} */

.footDivFlex {
    /* margin: 10px; */
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
}

.footDivFlexMenu text{
    font-size: 10px;
}

.footDivFlexMenuqss {
    background-color: #009ff0;
    justify-content:center;
    border-radius: 40px;
    width: 200px;
    align-items: center;
}

.menu-list-cell-num {
    position: absolute;
    left: 140px;
    width: 30px;
    height: 30px;
    border-radius:50px;
    border-style: solid;
    border-width: 1px;
    justify-content:center;
    align-items: center;
    border-color: #F08080;
    background-color: #F08080;
}

.footDivFlexTotalNum {
    width: 70px;
    height: 70px;
    border-radius:50px;
    border-style: solid;
    border-width: 1px;
    justify-content:center;
    align-items: center;
    border-color: #F08080;
    background-color: #F08080;
}

.ejectDatas {
    top:400px;
    height: 100px;
}

/* .mask {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 305px;
    background-color:rgba(0,0,0,0.5);
} */

.wxcPopupListCell {
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}

.wxcPopupListFoot {
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}

.wxcPopupListFootTotalNum {
    width: 70px;
    height: 70px;
    border-radius:50px;
    border-style: solid;
    border-width: 1px;
    justify-content:center;
    align-items: center;
    border-color: #F08080;
    background-color: #F08080;
}

.wxcPopupListFootMenuqss {
    background-color: #009ff0;
    justify-content:center;
    border-radius: 40px;
    width: 300px;
    height: 70px;
    align-items: center;
}
</style>
